<template>
	<el-row class="container" v-loading="loadings">
		<!-- <el-col :span="24" class="header" :style="{'background':theme}"> -->
		<el-col :span="24" class="header" :style="{'background':'#fff'}">
			<el-col :span="10" class="logo" :class="sysName.length>9?'logo-collapse-width':'logo-width'" :style="{'background':theme,'border-radius':'0','position': 'relative'}">
				<router-link to="/home_page"  style="color: #54B8FF;position: absolute;top: 50%;width: 100%;text-align: center;font-size: 20px;">{{collapsed?'':sysName}}</router-link>
				<!-- <i style="cursor: pointer;" class="menu-display icon-shousuo" @click.prevent="collapse"></i> -->
			</el-col>
			<!-- <el-col :span="10" class="logo" :class="sysName.length>9?'logo-collapse-width':'logo-width'" :style="{'background':theme,'border-radius':'0'}">
					<router-link to="/home_page" class="el-dropdown-link userinfo-inner"  style="color:#fff;font-size:18px;">
						<div>
							<img v-if="sysUserAvatar" :src="sysUserAvatar" alt="">
						</div>
						<div>
							<div>{{sysUserName}}</div>
							<div style="font-size:12px;">{{authTypeName}}</div>
						</div>
						
					</router-link>
			</el-col> -->
			<el-col :span="10">
				<i style="cursor: pointer;left: 265px;" class="menu-display icon-homemore" @click.prevent="collapse"></i>
				<div class="tools" style="width: auto;">
					<!-- <i style="cursor: pointer;" class="fa fa-align-justify" @click.prevent="collapse"></i> -->
										
					<!-- <router-link v-if="menubt.indexOf('/hdpi')>-1" target="_blank" to="/hdpi" style="padding-left:10px;" class="button-style" > 
					<img title="当前登录用户" src="../assets/img/jiankong.png" style="vertical-align: -10px;cursor:pointer;width:25px;transform: translateY(-2px);">
					&nbsp;<span>监控大屏</span> 
					</router-link> 
					<router-link v-if="menubt.indexOf('/hdpi/charging')>-1" target="_blank" to="/charging" class="button-style vertical-line" > 
					<img title="当前登录用户" src="../assets/img/zutai.png" style="vertical-align: -10px;cursor:pointer;margin-left:5px;">
					&nbsp;<span>充电监控</span> 
					</router-link> 
					<router-link v-if="menubt.indexOf('/topo')>-1" target="_blank" to="/topo" class="button-style vertical-line" > 
					<img title="当前登录用户" src="../assets/img/zutai.png" style="vertical-align: -10px;cursor:pointer;margin-left:5px;">
					&nbsp;<span>组态大屏</span> 
					</router-link> 
					<router-link v-if="menubt.indexOf('/checkCamera')>-1" target="_blank" to="/checkCamera" class="button-style vertical-line">
					<i class="el-icon-video-camera" style="font-size: 30px;vertical-align: middle;"></i>
					<span>摄像头</span>
					</router-link>
					<router-link v-if="menubt.indexOf('/temperature')>-1" target="_blank" to="/temperature" class="button-style vertical-line">
					<i class="el-icon-odometer" style="font-size: 30px;vertical-align: middle;"></i>
					<span>温度监控</span>
					</router-link> -->
					<!-- <router-link v-if="menubt.indexOf('/track')>-1" target="_blank" to="/track" class="button-style vertical-line">
					<i class="el-icon-position" style="font-size: 30px;vertical-align: middle;color: #000;"></i>
					<img title="当前登录用户" src="../assets/logo4.png" style="vertical-align: -10px;cursor:pointer;width:25px;transform: translateY(-2px);">
					&nbsp;<span>监控大屏</span> 
					</router-link> -->
					<router-link target="_blank" to="/newindex" class="button-style vertical-line">
					<!-- <i class="el-icon-position" style="font-size: 30px;vertical-align: middle;color: #000;"></i> -->
					<img title="当前登录用户" src="../assets/logo4.png" style="vertical-align: -10px;cursor:pointer;width:25px;transform: translateY(-2px);">
					&nbsp;<span>监控大屏</span> 
					</router-link>
				</div>
			</el-col>
			<!-- <el-col :span="4">
					
					<div class="" >
		 
						</div>
				
				</el-col> -->
			<el-col :span="9" class="userinfo" > 
				<el-dropdown trigger="hover" style="color:#fff;margin-top: 20px;margin-right: 20px;">
					<img v-if="sysUserAvatar" style="display: inline-block;width: 24px;height: 24px;border-radius: 50%;overflow: hidden;vertical-align: text-bottom;" :src="sysUserAvatar" alt="">
					<img v-else style="display: inline-block;width: 24px;height: 24px;border-radius: 50%;overflow: hidden;vertical-align: text-bottom;" src="../assets/1554284055.jpg" alt="">
					<router-link to="/home_page" style="font-size:20px;">{{collapsed?'':sysUserName}}</router-link>
					<el-dropdown-menu slot="dropdown">
						<el-dropdown-item @click.native="Settheme">设置主题</el-dropdown-item>
						<el-dropdown-item @click.native="logout">退出登录</el-dropdown-item>
					</el-dropdown-menu>
				</el-dropdown>	
			</el-col>
		</el-col>
		<div style="clear: both;display: flex;justify-content: flex-start;">
			<div :style="{'background':theme}" class="left-nav-occupy"></div>
			<div class="leftnav-label-list">
				<!-- 顶部分类栏 -->
				<TagsView></TagsView>
				<!-- <div class="top-labels">
					<span>首页</span>
					<span>x</span>
				</div> -->
			</div> 
		</div>
		<el-col :span="24" class="main">
			<aside :class="collapsed?'menu-collapsed':'menu-expanded'" style="background: #1C2C49;">
				<!--导航菜单-->
				<!-- background-color="#3c8dbc"  active-text-color="#71e9ff"-->
				<el-menu collapse-transition="true" :default-active="$route.path" text-color="#B6C6E1" :collapse="isCollapse"
				 :background-color="theme" :active-text-color="activeColor" class="el-menu-vertical-demo" @open="handleopen" @close="handleclose"
				 @select="handleselect" unique-opened router>
					<template v-for="(item,index) in $router.options.routes" v-if="!item.hidden&&item.path!='/user_btn'">
						<el-submenu :index="index+''" v-if="!item.leaf&&item.children" style="background: #1C2B36">
							<template slot="title"><i :class="item.icon" style="font-size: 25px;margin-right:11px;"></i><span slot="title" style="padding-left:5px'">{{item.name}}</span></template>
							<el-menu-item v-for="child in item.children" :index="child.path" :key="child.path" v-if="usertype==2&&child.path!='/suggest/report'&&child.path!='/suggest/reply/manager'">
								<template slot="title"><i :class="child.icon" style="font-size: 25px;margin-right:11px;"></i><span slot="title" style="padding-left:5px">{{child.name}}</span></template>
							</el-menu-item>
							<el-menu-item v-for="child in item.children" :index="child.path" :key="child.path" v-if="usertype!=2">
								<template slot="title"><i :class="child.icon" style="font-size: 25px;margin-right:11px;"></i><span slot="title" style="padding-left:5px">{{child.name}}</span></template>
							</el-menu-item>
						</el-submenu>
						<el-menu-item v-if="!item.children" :index="item.path"><i :class="item.icon"></i><span slot="title" style="">{{item.name}}</span></el-menu-item>
					</template>
				</el-menu>
				<!--导航菜单-折叠后-->
				<!-- <ul class="el-menu el-menu-vertical-demo collapsed" v-show="collapsed" ref="menuCollapsed">
					<li v-for="(item,index) in $router.options.routes" v-if="!item.hidden" class="el-submenu item">
						<template v-if="!item.leaf">
							<div class="el-submenu__title" style="padding-left: 20px;" @mouseover="showMenu(index,true)" @mouseout="showMenu(index,false)"><i :class="item.iconCls"></i></div>
							<ul class="el-menu submenu" :class="'submenu-hook-'+index" @mouseover="showMenu(index,true)" @mouseout="showMenu(index,false)"> 
								<li v-for="child in item.children" v-if="!child.hidden" :key="child.path" class="el-menu-item" style="padding-left: 40px;" :class="$route.path==child.path?'is-active':''" @click="$router.push(child.path)">{{child.name}}</li>
							</ul>
						</template>
						<template v-else>
							<li class="el-submenu">
								<div class="el-submenu__title el-menu-item" style="padding-left: 20px;height: 56px;line-height: 56px;padding: 0 20px;" :class="$route.path==item.children[0].path?'is-active':''" @click="$router.push(item.children[0].path)"><i :class="item.iconCls"></i></div>
							</li>
						</template>
					</li>
				</ul> -->
			</aside>
			<section class="content-container">
				<div class="grid-content bg-purple-light">
					<!-- <el-col :span="24" class="breadcrumb-container">
						<strong class="title">{{$route.name}}</strong> -->
						<!-- <el-breadcrumb separator="/" class="breadcrumb-inner">
							<el-breadcrumb-item v-for="item in $route.matched" :key="item.path" >
						
							</el-breadcrumb-item>
						</el-breadcrumb> -->
					<!-- </el-col> -->
					<el-col :span="24" class="content-wrapper">
						<transition name="fade" mode="out-in">
							<router-view v-if="!$route.meta.keepAlive" ref="transEvent" @fatherMethod="fatherMethod"></router-view>
							<keep-alive>
								<router-view v-if="$route.meta.keepAlive"  @fatherMethod="fatherMethod"></router-view>   <!--注意：需要缓存的页面   https://www.cnblogs.com/wangyunhui/p/8178392.html-->
							</keep-alive>
						</transition>
					</el-col>
				</div>
			</section>
		</el-col>
		<el-dialog title="主题设置" :visible.sync="issettheme" width="50%" :before-close="handleClose" custom-class="set-themes-tyle">
		<div>
			<div class="styletitle">主题风格设置</div>
			<span class="Color_plate" style="background:#3c8dbc;color:#fff;" @click="changetheme('#3c8dbc','dialogblue')"></span>	
			<span class="Color_plate" style="background:#e49;color:#fff;" @click="changetheme('#e49','dialogpink')"></span>
			<span class="Color_plate" style="background:#1a3257;color:#fff;" @click="changetheme('#1a3257','dialogblack')"></span>
			<span class="Color_plate" style="background:#1C2C49;color:#fff;" @click="changetheme('#1C2C49','dialogblackblue')"></span>
			<span class="Color_plate" style="background:#fff;color:#fff;" @click="changetheme('#fff','dialogwhite')"></span>
			<theme-picker style="height: 26px;margin: -3px 8px 0 0;" @change="themeChange" />
		</div>
		<div>
			<div class="styletitle">侧边栏选中字体颜色</div>
			<span class="Color_plate" style="background:#fff;color:#000;" @click="themActiveColor('#fff')"></span>
			<span class="Color_plate" style="background:#000;color:#fff;" @click="themActiveColor('#000')"></span>
			<span class="Color_plate" style="background:red;color:#fff;" @click="themActiveColor('red')"></span>
		</div>
		<!-- <div class="drawer-item">
			<theme-picker style="float: right;height: 26px;margin: -3px 8px 0 0;" @change="themeChange"/>
		</div> -->
		<div>
			<div class="styletitle">按钮颜色</div>
			<span class="Color_plate" style="background:#409eff;color:#fff;" @click="setButtonColor('primary')"></span>
			<span class="Color_plate" style="background:#67c23a;color:#fff;" @click="setButtonColor('success')"></span>
			<span class="Color_plate" style="background:#909399;color:#fff;" @click="setButtonColor('info')"></span>
			<span class="Color_plate" style="background:#e6a23c;color:#fff;" @click="setButtonColor('warning')"></span>
			<span class="Color_plate" style="background:#f56c6c;color:#fff;" @click="setButtonColor('danger')"></span>
		</div>
		<div>
			<div class="styletitle">标题颜色</div>
			<span class="Color_plate" style="background:#0099cc;color:#fff;" @click="settitleColor('#0099cc')"></span>
			<span class="Color_plate" style="background:#67c23a;color:#fff;" @click="settitleColor('#67c23a')"></span>
			<span class="Color_plate" style="background:#909399;color:#fff;" @click="settitleColor('#909399')"></span>
			<span class="Color_plate" style="background:#e6a23c;color:#fff;" @click="settitleColor('#e6a23c')"></span>
			<span class="Color_plate" style="background:#f56c6c;color:#fff;" @click="settitleColor('#f56c6c')"></span>
			<span class="Color_plate" style="background:#1C2C49;color:#fff;" @click="settitleColor('#1C2C49')"></span>
			<span class="Color_plate" style="background:#fafafa;color:#fff;" @click="settitleColor('#fafafa')"></span>
		</div>
		<!-- <div>
			<theme-picker style="float: left;height: 26px;margin: -3px 8px 0 0;" @change="themeChange" />
		</div> -->
		<span slot="footer" class="dialog-footer">
			<el-button @click="issettheme = false">取 消</el-button>
			<el-button type="primary" @click="issettheme = false">确 定</el-button>
		</span>
	</el-dialog>
	</el-row>
</template>

<script>
	// import '@/utils/global' //全局路由
	import ThemePicker from '@/components/ThemePicker'
	import  { mapGetters } from 'vuex'
	import TagsView from '@/components/TagsView'
	import {
		logout,
		company_get_my,
		dict_query,
		userinfo
	} from "../api/api";
	export default {
		// components: { ThemePicker },
		components: { TagsView,ThemePicker },
		data() {
			return {
				issettheme: false,
				usertype:'',
				loadings: true,
				screenWidth: document.body.clientWidth,
				formLabelWidth: '600px',
				isCollapse: false,//菜单收起展开
				// sysName: '物联网云管理系统',
				sysName: ' ',
				collapsed: false,
				sysUserName: '',
				sysUserAvatar: '',
				authTypeName:'',
				form: {
					name: '',
					region: '',
					date1: '',
					date2: '',
					delivery: false,
					type: [],
					resource: '',
					desc: ''
				},
				myWidth: window.innerWidth,
				timer: false,
				getmy: '',
				theme: this.$store.state.theme,
			}
		},
		watch: {
			screenWidth(val) {//监听屏幕宽度
				if (!this.timer) {
					this.screenWidth = val
					this.timer = true
					let that = this
					setTimeout(function () {
						// that.screenWidth = that.$store.state.canvasWidth
						// that.init()
						that.timer = false;
						if (that.screenWidth < 800) {//屏幕小于800收起菜单栏
							that.isCollapse = true;
						} else {
							that.isCollapse = false;
						}

					}, 400)
				}
			}
		},
		computed:{
			// theme() {
			// 	return this.$store.state.theme
			// },
			// 拿到改变主题色
			activeColor(){
				return this.$store.state.activeColor
			},
			buttonColor(){
				return this.$store.state.buttonColor
			},
			titleColor(){
				return this.$store.state.titleColor
			},
		},
		methods: {
			//折叠导航栏
			collapse() {
				this.isCollapse = !this.isCollapse;
			},
			// 点击设置改变主题色
			themeChange(val){
				this.$store.dispatch('changeSetting', {
					key: 'theme',
					value: val
				})
				this.theme = val;
			},
			handleSave() {//?
			
				if (this.$refs.transEvent) {
					this.$refs.transEvent.handleSave();
				}
			},
			handleSave1(s) {
				// console.log(typeof  this.$refs.transEvent.handleSave1())
				// if(typeof(this.$refs.transEvent.handleSave1(s))=== "function") { //是函数    其中 FunName 为函数名称
                //     console.log("is function");
                // } else { //不是函数
				// 	console.log("not is function");

                // }
				if (this.$refs.transEvent) {

					this.$refs.transEvent.handleSave1(s);
				}
			},
			handleSave2(s) {
				if (this.$refs.transEvent) {
					this.$refs.transEvent.handleSave2(s);
				}
			},
			fatherMethod(){//登录信息
				userinfo(JSON.parse(localStorage.getItem('key'))).then(e => {
					let {
						code,
						data,
						message
					} = e;
					if (code !== 0) {} else {
						this.sysUserName = data.userName || '未知';
						this.sysUserAvatar = data.avatar
						// alert(JSON.stringify(JSON.stringify(data)))
						sessionStorage.setItem("user", JSON.stringify(data));

					}
				});
				let para3 = {
                    pageNo: 1,
                    pageSize: 10,
                    name:'sys-conf'
                };
				dict_query(para3).then((res) => { 
					if(res.code == 0){
						this.begCode (res.code);
						this.sysName = res.data.list[0].remark;
					}
				});
				company_get_my().then(e => {
				// this.sysName = e.data.title
				let { 
					code,
					data,
					message
				} = e;
				if (code !== 0) {

				} else {
					// alert(JSON.stringify(JSON.stringify(data)))
					if(data){

						this.getmy = data.name;
					}

				}
			})
			},
			onSubmit() {
				console.log('submit!');
			},
			handleopen() {
				//console.log('handleopen');
			},
			handleclose() {
				//console.log('handleclose');
			},
			handleselect: function (a, b) {
				console.log(a);
				
				console.log(b)
				console.log(this.$route)
				localStorage.setItem('new',JSON.stringify({'path':a}))//保存路由
			},
			Settheme(){
				this.issettheme = true
			},
			changetheme(val,dialog){
				this.$store.dispatch('changeSetting', {
					key: 'theme',
					value: val
				})
				this.$store.dispatch('changeSetting', {
					key: 'dialogTitleColor',
					value: dialog
				})
			},
			themActiveColor(val){
				this.$store.dispatch('changeSetting', {
					key: 'activeColor',
					value: val
				})
			},
			setButtonColor(val){
				this.$store.dispatch('changeSetting', {
					key: 'buttonColor',
					value: val
				})
			},
			settitleColor(val){
				this.$store.dispatch('changeSetting', {
					key: 'titleColor',
					value: val
				})
			},
			//退出登录
			logout: function () {
				var _this = this;
				this.$confirm('确认退出吗?', '提示', {
					//type: 'warning'
				}).then(() => {
					sessionStorage.clear();
					localStorage.removeItem('key');
					localStorage.removeItem('menu');
					localStorage.removeItem('menubt');
					localStorage.removeItem('maplist')
					_this.$router.push('/login');
					this.$parent.socketclose();
					var loginParams = {
						token: JSON.parse(localStorage.getItem('key'))
					};
					logout(loginParams).then(e => {
						this.logining = false;
						//NProgress.done();
						let {
							code,
							data,
							message
						} = e;
						// this.begCode(code);
					
							// return false;
							

					});
				}).catch(() => {

				});


			},
			//折叠导航栏
			collapse: function () {
				this.isCollapse = !this.isCollapse;
			},
			showMenu(i, status) {
				this.$refs.menuCollapsed.getElementsByClassName('submenu-hook-' + i)[0].style.display = status ? 'block' : 'none';
			},

		},

		mounted() {
			console.log(this.$router);
			// console.log(this.$store.state.theme)
			this.menubt = localStorage.getItem('menubt')
			const that = this
			window.onresize = () => {
				return (() => {
					window.screenWidth = document.body.clientWidth
					that.screenWidth = window.screenWidth
				})()
			}
			let para1 = { 
				name: 'industry',
				pageSize: 999,
				pageNo: 1,
			}
			dict_query(para1).then((res) => {
				if (res.code == 0) {
				 	this.begCode(res.code,res.message);
					localStorage.setItem('pb_industry', JSON.stringify(res.data.list));
				}

			});
			if (localStorage.getItem('key')) {
				userinfo(JSON.parse(localStorage.getItem('key'))).then(e => {
					let {
						code,
						data,
						message
					} = e;
					if (code !== 0) {} else {
						
					this.usertype = data.type;
						this.sysUserName = data.userName || '未知';
						this.authTypeName = data.authTypeName || '';
						this.sysUserAvatar = data.avatar || '';
						// alert(JSON.stringify(JSON.stringify(data)))
						sessionStorage.setItem("user", JSON.stringify(data));

					}
				})
			} else {
				this.$router.push({
					path: "/login"
				});
			}

			company_get_my().then(e => {
				// this.sysName = e.data.title
				let {
					code,
					data,
					message
				} = e;

				if (code !== 0) {

				} else {
					// alert(JSON.stringify(JSON.stringify(data)))
					if(data){

						this.getmy = data.name; 
					}

				}
			})
			let para3 = {
                    pageNo: 1,
                    pageSize: 10,
                    name:'sys-conf'
                };
			dict_query(para3).then((res) => { 
				if(res.code == 0){
					this.begCode (res.code);
					// this.total = res.data.totalCount;
					this.sysName = res.data.list[0].remark;
				}
			});

			var user = sessionStorage.getItem('user');

			if (user) {
				user = JSON.parse(user);
				// alert(user.userName)
				this.sysUserName = user.userName || '未知';
				this.sysUserAvatar = user.avatar || '';
				this.authTypeName = user.authTypeName || '';
				
			this.usertype = user.type;
			}
			this.loadings = false;
			
			console.log(user)
		}
	}
</script>

<style scoped lang="scss">
	@import '~scss_vars';
	.drawer-item {
      color: rgba(0, 0, 0, .65);
      font-size: 14px;
      padding: 12px 0;
    }
	.container {
		position: absolute;
		top: 0px;
		bottom: 0px;
		width: 100%;

		.header {
			border-radius: 0;
			// height: 60px;
			// height: 100px;
			// line-height: 60px;
			background: $color-primary;
			color: #fff;

			.userinfo {
				text-align: right;
				padding-right: 35px;
				float: right;
				transform: translateY(0px);
				.userinfo-inner {
					cursor: pointer;
					color: #fff;
					text-align: center;
					img {
						width: 40px;
						height: 40px;
						border-radius: 20px;
						margin: 10px 0px 10px 10px;
						float: right;
					}
				}
			}

			.logo {
				//width:230px;
				height: 75px;
				font-size: 18px;
				// padding-left: 20px;
				// padding-right: 20px;
				// padding: 24px 25px 20px;
				border-color: rgba(238, 241, 146, 0.3);
				border-right-width: 1px;
				text-align: center;
				border-right-style: solid;
				word-wrap: break-word;
				word-break: break-all;
				overflow: hidden;
				text-align: left;

				img {
					width: 40px;
					float: left;
					margin: 10px 10px 10px 18px;
				}

				.txt {
					color: #fff;
				}
			}

			.logo-width {
				width: 230px;
				
			}

			.logo-collapse-width {
				// width: 60px
				width: 230px;
				// padding-top: 14px;
			}

			.tools {
				// padding: 0px 23px;
				// padding: 12px 23px 0;
				// padding-left: 23px;
				// padding-top: 19px;
				width: 14px;
				height: 75px;
				// line-height: 60px;

			}
		}

		.main {
			display: flex;
			// background: #324057;
			position: absolute;
			// top: 75px;
			top: 115px;
			bottom: 0px;
			overflow: hidden;

			aside {
				flex: 0 0 230px;
				width: 230px;

				// position: absolute;
				// top: 0px;
				// bottom: 0px;
				.el-menu {
					/* width: auto !important; */
					height: 100%;
					border: 0;
				}

				.collapsed {
					width: 60px;

					.item {
						position: relative;
					}

					.submenu {
						position: absolute;
						top: 0px;
						left: 60px;
						z-index: 99999;
						height: auto;
						display: none;
					}

				}
			}

			.menu-collapsed {
				flex: 0 0 60px;
				width: 60px;
			}

			.menu-expanded {
				flex: 0 0 230px;
				width: 230px;
			}

			.content-container {
				// background: #f1f2f7;
				flex: 1;
				// position: absolute;
				// right: 0px;
				// top: 0px;
				// bottom: 0px;
				// left: 230px;
				overflow-y: scroll;
				padding: 20px;
				padding-top:0;

				.breadcrumb-container {

					//margin-bottom: 15px;
					.title {
						width: 200px;
						float: left;
						color: #475669;
					}

					.breadcrumb-inner {
						float: right;
					}
				}

				.content-wrapper {
					// background-color: #fff;
					box-sizing: border-box;
				}
			}
		}
	}
	.el-submenu__title i {
		color: #fff;
	}

	.el-menu-item i {
		color: #fff;
	}

	.el-row>.el-col {
		border-radius: 0;
	}

	.el-menu-vertical-demo:not(.el-menu--collapse) {
		width: 230px;
		min-height: 400px;
	}
		.container .main .menu-expanded {
    flex: initial!important; 
     width: auto;
}
	.menu-display{
		display: block;
		width: 18px;
		height: 18px;
		// background: #e49;
		position: absolute;
		top: 29px;
		left: 200px;
	}
	.button-style{
		display: inline-block;
		position: relative;
		// width: 85px;
		height: 100%;
		line-height: 28px;
		// color: #fff;
		font-size: 18px;
		line-height: 75px;
		padding: 0 5px;
		float: left;
		margin-left: 100px;
	}
	.button-style:hover{
		// background: #0061b0;
		opacity: .5;
	}
	.vertical-line::before{
		content: "";
		display: block;
		width: 1px;
		height: 75px;
		position: absolute;
		left: -1px;
		// background: rgba(238, 241, 146, 0.6);
	}
	.userinfo-inner-hide{
		cursor: pointer;
		display: inline-block;
		width: 142px;
		transform: translateY(10px);
	}
	.userinfo-inner-show{
		cursor: pointer;	
	}
	.Color_plate{
		display: inline-block;
		width: 30px;
		height: 30px;
		// padding: 5px 10px;
		border-radius: 5px;
		cursor: pointer;
	}
	.styletitle{
		// font-weight: bold;
		font-size: 18px;
		margin: 10px 0;
	}
	.set-themes-tyle{
		background: #edf6f8;
	}
	.left-nav-occupy{
		display: inline-block;
		width: 230px;
		height: 40px;
	}
	.leftnav-label-list{
		position: relative;
		display: inline-block;
		width: 87%;
		padding-left: 20px;
		
	}
	.leftnav-label-list::before{
		content: "";
		display: inline-block;
		position: absolute;
		width: 100%;
		height: 1px;
		background-color: #d8dce5;
		top: 0;
		left: 0;
		box-shadow: 0 1px 3px 0 #b4aaaa
	}
	.leftnav-label-list::after{
		content: "";
		display: inline-block;
		position: absolute;
		width: 100%;
		height: 1px;
		background-color: #d8dce5;
		bottom: 1px;
		left: 0;
		box-shadow: 0 1px 3px 0 rgba(0 ,0 ,0, 12%), 0 0 3px 0 rgba(0, 0, 0, 4%);
	}
	.top-labels{
		display: inline-block;
		position: relative;
		cursor: pointer;
		height: 26px;
		line-height: 26px;
		border: 1px solid #d8dce5;
		color: #495060;
		background: #fff;
		padding: 0 8px;
		font-size: 12px;
		margin-left: 5px;
		margin-top: 4px;
	}
</style>